<!--
 * @Autor: ZN
 * @LastEditors: ZN
 * @Date: 2023-05-10 17:06:37
 * @LastEditTime: 2023-05-10 17:48:26
 * @Description: 添加心情随笔
-->
<template>
  <div class="add-daily-container">
    <el-form :model="form" label-width="90px" :rules="rules" ref="formRef">
      <el-form-item label="标题:" prop="title">
        <el-input v-model="form.title" clearable placeholder="请输入标题" />
      </el-form-item>

      <el-form-item label="分类:" prop="kind">
        <el-select
          v-model="form.kind"
          placeholder="请选择分类"
          style="width: 100%;"
        >
          <el-option label="娱乐" value="play" />
          <el-option label="工作" value="work" />
          <el-option label="生活" value="life" />
        </el-select>
      </el-form-item>

      <el-form-item label="发布内容:" prop="content">
        <el-input
          v-model="form.content"
          type="textarea"
          :rows="3"
          placeholder="请输入内容"
          clearable
        />
      </el-form-item>

      <el-form-item> </el-form-item>
    </el-form>
    <el-button type="primary" class="submit-btn" @click="onSubmit(formRef)"
      >发布</el-button
    >
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { addDailyDatas } from "@/service/daily/daily";
import { ElMessage } from "element-plus";

const formRef = ref(null);

const form = ref({
  title: "",
  kind: "",
  content: "",
});
const rules = ref({
  title: [{ required: true, trigger: "blur", message: "标题不能为空" }],
  content: [{ required: true, trigger: "blur", message: "内容不能为空" }],
  kind: [{ required: true, trigger: "blur", message: "请选择分类" }],
});

const emits = defineEmits<{
  (event: "success"): void;
}>();

// 提交
const onSubmit = async (formRef: any) => {
  formRef.validate(async (valid) => {
    if (!valid) return;
    await addDailyDatas(form.value);
    ElMessage.success("发布成功");
    form.value.content = "";
    form.value.title = "";
    form.value.kind = "";
    emits("success");
  });
};
</script>

<style scoped lang="scss">
.add-daily-container {
  padding: 20px 0;

  .submit-btn {
    width: 40px;
  }

  .submit-btn {
    width: 180px;
    position: absolute;
    left: 50%;
    margin-left: -90px;
    margin-top: 10px;
  }
}

:deep(.el-form-item__label) {
  font-family: Albbpht;
  color: #000;
  font-size: 14px;
}
</style>
